<template>
  <div class="page">
    <div class="head">
      <div class="head-title">订单详情</div>
      <div class="head-box">
        <div class="box-item">订单号：{{ orderItem.shopOrderId }}</div>
        <div class="box-item">客户姓名：{{ orderItem.custName }}</div>
        <div class="box-item">
          订单总金额（元）：￥{{ orderItem.orderActualAmt }}
        </div>
      </div>
      <div class="head-box">
        <div class="box-item">订单数量：{{ orderItem.goodsTotalQty }}</div>
        <div class="box-item">
          租车时间：{{ timestampToTime(orderItem.orderNotes.split(',')[0]) }}
        </div>
        <div class="box-item">
          还车时间：{{ timestampToTime(orderItem.orderNotes.split(',')[1]) }}
        </div>
      </div>
      <div class="head-box">
        <div class="box-item">租车天数：{{ orderItem.bizOrderNo }}</div>
        <div class="box-item">
          接收方式：{{ orderItem.deliveryModeText }}
        </div>
        <div class="box-item">
          送车费(元)：{{ orderItem.freightAmt }}
        </div>
      </div>
      <div class="head-box">
        <div class="box-item">联系人：{{ orderItem.consigneeName }}</div>
        <div class="box-item">
          联系电话：{{ orderItem.consigneeMobile }}
        </div>
        <div class="box-item">
          订单状态：
          <Tag :color="this.$dict.orderStatus.color(orderItem.orderStatus)">{{this.$dict.orderStatus.name(orderItem.orderStatus)}}</Tag>
        </div>
      </div>
      <div class="head-box">
        <div class="box-item item-image">回执图片：<img :src="orderItem.image" alt=""></div>
        <div class="box-item">回执备注：{{ orderItem.remark }}</div>
        <div class="box-item">发货地址：{{ orderItem.pickSiteInfo }}</div>
      </div>
    </div>
    <div class="main">
      <Table border :columns="columns" :data="dataGrid"></Table>
    </div>
  </div>
</template>
<script>
export default {
  name: "detail",
  data() {
    return {
      columns: [
        {
          title: "车型图片",
          key: "goodsImg",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h(
                "img",
                {
                  attrs: {
                    src: params.row.goodsImg,
                  },
                  style: {
                    width: "50px",
                    height: "46px",
                  },
                },
                "View"
              ),
            ]);
          },
        },
        {
          title: "车型名称",
          key: "goodsName",
        },
        {
          title: "车款/型号",
          key: "goodsSpec",
        },
        {
          title: "数量",
          key: "goodsQty",
          width: 100
        },
        {
          title: "计价单位",
          key: "skuUom",
          width: 100
        },
        {
          title: "单价(元)",
          key: "salePrice",
          width: 150,
          sortable: true,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),

              h("span", params.row.salePrice),
            ]);
          },
        },
        {
          title: "金额(元)",
          key: "actualAmt",
          sortable: true,
          width: 150,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),

              h(
                "span",
                this.goodsAllMoney(params.row.salePrice, params.row.goodsQty)
              ),
            ]);
          },
        },
      ]
    };
  },
  props: {
    dataGrid: Array,
    orderItem: Object,
    callbank: Function
  },
  created() {},
  methods: {
    timestampToTime(timestamp) {
      return this.$date(timestamp,'yyyy-MM-dd HH:mm:ss');
    },
    goodsAllMoney(salePrice, goodsQty) {
      let moneyAll = (salePrice * goodsQty).toFixed(2);
      return moneyAll;
    },
    dateFormat(dateStr) {
      if(dateStr) return dateStr.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
    }
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
}
.head {
  width: 100%;
}
.head-title {
  font-size: 20px;
  height: 40px;
  font-weight: bold;
}
.head-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  min-height: 30px;
}
.box-item {
  width: 30%;
}
.btns{
  margin: 16px 0px;
}
.item-image{
  display: flex;
  align-items: flex-start;
}
</style>